import { useLocation, useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
import { useEffect, useState } from "react";
import { artDetailType, getArtDetailApi } from "@/apis/art_detail";
const Detail = () => {
  // const [params] = useSearchParams();
  // console.log(params.get("art_id"));
  const { state } = useLocation();
  console.log(state.artId, "useParams");

  const navigator = useNavigate();
  const back = () => {
    navigator(-1);
  };
  const [detailData, setDetailData] = useState<artDetailType | null>();
  useEffect(() => {
    const getFetchDetailData = async () => {
      const response = await getArtDetailApi(state.artId);
      setDetailData(response.data.data);
    };
    getFetchDetailData();
  }, [state.artId]);

  //异常处理
  if (!detailData) {
    return <div>loading...</div>;
  }
  return (
    <div>
      <NavBar back="返回" onBack={back}>
        {detailData?.title}
      </NavBar>
      <div dangerouslySetInnerHTML={{ __html: detailData?.content }}></div>
    </div>
  );
};

export default Detail;
